<template>
  <div class="micro-bargain-box">
    <!--预览控制区-->
    <div class="design-preview-controller" :style="`padding: ${formData.marginTop/2}px 0 ${formData.marginBottom/2}px`">
      <div class="group_booking-content" :class="['group_booking-content'+ formData.indicator]" :style="countWidth">
        <div v-for="(item,index) in formData.bargain_list" :key="index" class="group_booking-content-item" :style="{paddingRight:formData.indicator == 2 ||formData.indicator == 3 ||formData.indicator == 5 || formData.indicator == 6?formData.spacing/2 + 'px':0}">
          <!--内容-->
          <div
            class="column-content"
            :class="{'group_booking-shadow':Number(formData.style_type) === 1,'group_booking-border':Number(formData.style_type) === 2,'group_booking-radius':Number(formData.box_border) === 1,'group_booking-mini-list4':Number(formData.indicator) === 4}"
            :style="{margin: `0 0 ${formData.spacing/2}px`,borderRadius:`${formData.cornerStyle/2}px`,border:formData.commodityStyle == '0'?`none`:`1px solid #dadada`}"
          >
            <div class="column-item-content" >
              <div class="column-image" :style="{backgroundImage:'url('+item.img+')',paddingTop:paddingTops,backgroundSize:formData.imgFill}">
                <!--倒计时-->
                <div v-show="formData.count_down == '0'" v-if="Number(formData.indicator) === 1 || Number(formData.indicator) === 5" class="active-desc active-descs">
                  <span class="active-name">砍价</span>
                  <div class="active-time">
                    <span>距开始仅剩</span>
                    <div class="and-time">2 时 38 分 22</div>
                  </div>
                </div>
                <div v-show="formData.count_down == '0'" v-if="Number(formData.indicator) == 2 || Number(formData.indicator) == 4 || Number(formData.indicator) === 5" class="active-desc active-desc-list">
                  <span>距开始</span><span class="and-time">2 时 38 分 22</span>
                </div>
              </div>
              <div class="column-info">
                <div class="column-title" v-show="formData.is_name == '0'"  :style="{textAlign:formData.textAlign == '0'?'left':'center'}"><span class="title--tag" v-if="formData.indicator == 1 || formData.indicator == 2 || formData.indicator == 4 || formData.indicator == 5">减90.00元</span>{{item.name}}</div>
                 <div class="column-desc" v-show="formData.describe == '0'"  :style="{textAlign:formData.textAlign == '0'?'left':'center'}">此处显示商品描述，最多显示一行</div>
                 <div class="column-desc m-t5" v-show="formData.stock == '0'"  :style="{textAlign:formData.textAlign == '0'?'left':'center'}">仅剩20件</div>
                <div class="column-price" :style="{flexDirection:formData.textAlign == '0'?'row':'column'}">
                  <div class="the-price">
                    <span class="price-current" v-show="formData.price == '0'">￥0.01</span> 
                    <span class="price-or" v-show="formData.line == '0'">￥1.00</span>
                  </div>
                  <div v-show="formData.buy_btn == '0'">
                      <div v-show="formData.indicator == 1 || formData.indicator == 2 || formData.indicator == 4 || formData.indicator == 5"
                      v-if="Number(formData.show_buy_btn) === 1"
                      :class="['goods-info-buy-btn','btn-type-'+formData.buy_btn_type]"
                    >
                      <i v-if="formData.buy_btn_type===1" class="el-icon-shopping-cart-1" />
                      <i v-if="formData.buy_btn_type===2" class="el-icon-circle-plus-outline" />
                      <el-button
                        v-if="formData.buy_btn_type>=3"
                        :round="formData.buy_btn_type==3"
                        size="mini"
                        :type="formData.buy_btn_type | buy_btn_type"
                      >{{ formData.button_text || '马上抢' }}
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!--编辑工作区-->
    <div v-show="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap">
          <div class="design-editor-component-title">砍价</div>
          <div class="tabRadioWrap">
            <el-radio-group v-model="formData.indicator"  @change="tabListC">
              <el-tooltip v-for="(item,index) in tabList" :key="index" effect="dark" :content="item.title" placement="bottom">
                <el-radio-button :label="index + 1">
                  <span :class="[item.icon]" />
                </el-radio-button>
              </el-tooltip>
            </el-radio-group>
          </div>
          <el-tabs v-model="tabActive" tab-position="top" style="marginTop: 10px;">
            <el-tab-pane label="内容设置" name="0">
              <div class="discountList styleWrap">
                <div class="dis al_item dis_ju_spb couponWrap">
                  <span class="desc">添加活动（最多5个，可拖动排序）</span>
                </div>
                <draggable v-model="formData.bargain_list">
                  <transition-group>
                    <div v-for="(item,index) in formData.bargain_list" :key="index" class="discount-item">
                      <!-- <span><i class="coupon-item-icon el-icon-s-operation" /> 限时折扣：{{ item.describe }}</span> -->
                      <i class="el-icon-circle-close" @click="formData.bargain_list.splice(index,1)" />
                      <div class="discount-item-cont">
                        <div>测试1</div>
                        <div class="dis al_item dis_ju_spb w100e">
                          <div class="dis al_item">
                            <span>商品选择方式</span>
                          </div>
                          <el-radio-group v-model="item.way" size="small" @change="wayChange(index)">
                            <el-radio label="0">手动</el-radio>
                            <el-radio label="1">自动</el-radio>
                          </el-radio-group>
                        </div>
                        <div class="choose-active">
                          <div class="add-goods">选择商品</div>
                          <draggable :list="formData.bargain_list" style="display: inline-block">
                            <div class="active-item">
                              <i class="el-icon-circle-close" />
                            </div>
                            <div class="active-item">
                              <i class="el-icon-circle-close" />
                            </div>
                            <div class="active-item">
                              <i class="el-icon-circle-close" />
                            </div>
                          </draggable>
                          <div class="active-item" @click="addUmp"><i class="el-icon-plus" /></div>
                        </div>
                        <div class="dis al_item dis_ju_spb w100e">
                          <div class="dis al_item">
                            <span>显示名称</span>
                          </div>
                          <el-input type="text" v-model="item.name" placeholder="请输入内容"  maxlength="5" size="mini" show-word-limit></el-input>
                        </div>
                      </div>
                    </div>
                  </transition-group>
                </draggable>
                <div class="add-coupon-btn" @click="addUmp">
                  <i class="el-icon-plus" /><span>添加活动</span>
                </div>
                
              </div>
              <div class="discountList styleWrap">
                 <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>图片显示比例</span>
                    <span class="text_mar" v-if="formData.ratio == '0'">{{ formData.ratio == '0' && '3:2'  }}</span>
                    <span class="text_mar" v-else-if="formData.ratio == '1'">{{ formData.ratio == '1' && '1:1'  }}</span>
                    <span class="text_mar" v-else-if="formData.ratio == '2'">{{ formData.ratio == '2' && '3:4'  }}</span>
                    <span class="text_mar" v-else-if="formData.ratio == '3'">{{ formData.ratio == '3' && '16:9'  }}</span>
                  </div>
                   <el-button-group class="discount-group">
                      <el-button size="mini" class="el-icon-full-screen" :class="formData.ratio == '0'?'discount-group-ative':''" @click="ratioClick('0')" :disabled="formData.indicator == 4?true:false"></el-button>
                      <el-button size="mini" class="el-icon-full-screen" :class="formData.ratio == '1'?'discount-group-ative':''" @click="ratioClick('1')"></el-button>
                      <el-button size="mini" class="el-icon-full-screen" :class="formData.ratio == '2'?'discount-group-ative':''" @click="ratioClick('2')" :disabled="formData.indicator == 4?true:false"></el-button>
                      <el-button size="mini" class="el-icon-crop" :class="formData.ratio == '3'?'discount-group-ative':''" @click="ratioClick('3')" :disabled="formData.indicator == 4?true:false"></el-button>
                    </el-button-group>
                </div>
                <div v-if="Number(formData.show_buy_btn) === 1" class="btn-style">
                  <div class="btn-style-radio">
                    <el-radio v-for="(item,index) in 4" :key="index" v-model="formData.buy_btn_type" :label="item">
                      样式{{ item }}
                    </el-radio>
                  </div>
                  <div v-if="formData.buy_btn_type>=3" class="btn-type-input">
                    <el-input v-model="formData.button_text" maxlength="4" />
                  </div>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>商品名称</span>
                  </div>
                  <el-radio-group v-model="formData.is_name" size="small">
                    <el-radio-button label="0">显示</el-radio-button>
                    <el-radio-button label="1">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>商品描述</span>
                  </div>
                  <el-radio-group v-model="formData.describe" size="small">
                    <el-radio-button label="0">显示</el-radio-button>
                    <el-radio-button label="1">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>砍价价格</span>
                  </div>
                  <el-radio-group v-model="formData.price" size="small">
                    <el-radio-button label="0">显示</el-radio-button>
                    <el-radio-button label="1">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>商品原价</span>
                  </div>
                  <el-radio-group v-model="formData.line" size="small">
                    <el-radio-button label="0">显示</el-radio-button>
                    <el-radio-button label="1">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>剩余库存</span>
                  </div>
                  <el-radio-group v-model="formData.stock" size="small">
                    <el-radio-button label="0">显示</el-radio-button>
                    <el-radio-button label="1">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>购买按钮</span>
                  </div>
                  <el-radio-group v-model="formData.buy_btn" size="small">
                    <el-radio-button label="0">显示</el-radio-button>
                    <el-radio-button label="1">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>倒计时</span>
                  </div>
                  <el-radio-group v-model="formData.count_down" size="small">
                    <el-radio-button label="0">显示</el-radio-button>
                    <el-radio-button label="1">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>显示售罄/活动结束</span>
                  </div>
                  <el-radio-group v-model="formData.end" size="small">
                    <el-radio-button label="0">显示</el-radio-button>
                    <el-radio-button label="1">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="样式设置" name="1">
              <div class="styleWrap">
                <div class="titleStyle">内容样式</div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>商品样式</span>
                  </div>
                  <el-radio-group v-model="formData.commodityStyle" size="small">
                    <el-radio-button label="0">卡片</el-radio-button>
                    <el-radio-button label="1">描边</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>背景</span>
                  </div>
                  <el-radio-group v-model="formData.bg" size="small">
                    <el-radio-button label="0">显示</el-radio-button>
                    <el-radio-button label="1">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>边角样式</span>
                  </div>
                  <el-radio-group v-model="formData.cornerStyle" size="small">
                    <el-radio-button label="16">显示</el-radio-button>
                    <el-radio-button label="0">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>图片填充</span>
                  </div>
                  <div class="discount-group">
                    <span class="el-icon-full-screen" :class="formData.imgFill == 'cover'?'discount-group-ative':''" @click="imgFillClick('cover')"></span>
                    <span class="el-icon-crop" :class="formData.imgFill == 'contain'?'discount-group-ative':''" @click="imgFillClick('contain')"></span>
                  </div>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>文本对齐</span>
                  </div>
                  <el-button-group class="discount-group">
                    <!-- 左对齐 -->
                    <el-button size="mini" class="el-icon-s-fold" :class="formData.textAlign == '0'?'discount-group-ative':''" @click="textClick('0')"></el-button> 
                    <!-- 居中对齐 -->
                    <el-button size="mini" class="el-icon-s-unfold" :class="formData.textAlign == '1'?'discount-group-ative':''" @click="textClick('1')"></el-button>
                  </el-button-group>
                </div>
                </div>
                <div class="styleWrap">
                  <div class="titleStyle">组件样式</div>
                  <div class="dis al_item dis_ju_spb w100e item_mar">
                    <div class="dis al_item">
                      <span>上边距</span>
                      <span class="text_mar">{{ formData.marginTop }}px</span>
                    </div>
                    <el-radio-group v-model="formData.marginTop" size="small">
                      <el-radio-button label="0">小</el-radio-button>
                      <el-radio-button label="15">中</el-radio-button>
                      <el-radio-button label="30">大</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="dis al_item dis_ju_spb w100e item_mar">
                    <div class="dis al_item">
                      <span>下边距</span>
                      <span class="text_mar">{{ formData.marginBottom }}px</span>
                    </div>
                    <el-radio-group v-model="formData.marginBottom" size="small">
                      <el-radio-button label="0">小</el-radio-button>
                      <el-radio-button label="15">中</el-radio-button>
                      <el-radio-button label="30">大</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="dis al_item dis_ju_spb w100e item_mar">
                    <div class="dis al_item">
                      <span>商品间距</span>
                      <span class="text_mar">{{ formData.spacing }}px</span>
                    </div>
                    <el-radio-group v-model="formData.spacing" size="small">
                      <el-radio-button :label="0">小</el-radio-button>
                      <el-radio-button :label="15">中</el-radio-button>
                      <el-radio-button :label="30">大</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
    </div>
    <el-dialog title="选择商品" :visible.sync="dialogFormVisible" width="35%">
      <div class="dialog-content">
        <el-checkbox v-model="checked">全选</el-checkbox>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import index from './index.js'

export default index
</script>

